<template>
  <div class="home">
    <el-dialog
      :visible.sync="dialogTableVisible"
      :center="true"
      :fullscreen="true"
      :show-close="false"
      title="ESC 关闭下载列表---因为卡顿限制了下载进度更新频率可能更新时间比较长"
    >
      <div class="video-container">
        <div class="video-list" v-if="getPagesAndFlvData">
          <el-row>
            <el-col :span="24">
              <div
                class="item"
                style="background-color:#409EFF;margin-top:3px"
                :class="{ 'item-d': index % 2 }"
                v-for="(item, index) in getDwonLoadList"
                :key="index + item.cid + item.avid"
              >
                <el-row>
                  <el-col :span="6">
                    <div class="title">{{ item.fileName }}</div>
                  </el-col>
                  <el-col :span="10">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="26"
                      :percentage="
                        parseFloat(
                          ((item.current / item.total) * 100).toFixed(2)
                        )
                      "
                      :status="
                        item.total == item.current ? 'success' : 'exception'
                      "
                      style="padding-top:6px;"
                    ></el-progress>
                  </el-col>
                  <el-col :span="4">
                    <span
                      >{{ (item.current / 1024 / 1024).toFixed(2) }}M/{{
                        (item.total / 1024 / 1024).toFixed(2)
                      }}M</span
                    >
                  </el-col>
                  <el-col :span="4"></el-col>
                  <div v-if="item.total != item.current">
                    <i
                      v-if="item.state === -1"
                      class="el-icon-video-play cursor"
                      style="font-size:20px"
                      @click.stop="
                        restoreLoadDownVideo(
                          item.avid,
                          item.cid,
                          item.fileName,
                          item.order,
                          item.url,
                          item.dirName,
                          item.size
                        )
                      "
                    />
                    <i
                      v-if="item.state === 1"
                      class="el-icon-video-pause cursor"
                      style="font-size:20px"
                      @click.stop="
                        stopDownLoadVideo(
                          item.avid,
                          item.cid,
                          item.fileName,
                          item.order
                        )
                      "
                    />
                  </div>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
    <el-row :gutter="6">
      <el-col :span="24">
        <el-input
          v-model="cookie"
          placeholder="请输入Cookie,没有 Cookie 无法下载 1080p 清晰的"
        ></el-input>
      </el-col>
      <el-col :span="20">
        <el-input
          v-model.number="avid"
          placeholder="请输入 avid 视频链接中的 avxxxxxxxx 只要数字部分"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="ReqPagesAndFlv" style="width:100%;"
          >开始拉取</el-button
        >
      </el-col>
    </el-row>
    <div class="video-container">
      <el-col :span="24">
        <div class="big-title" v-if="getPagesAndFlvData">
          <span>{{ getPagesAndFlvData.title }}</span>
        </div>
      </el-col>

      <div class="video-list" v-if="getPagesAndFlvData">
        <el-row>
          <el-col :span="24">
            <div
              class="item"
              :class="{ 'item-d': index % 2 }"
              v-for="(item, index) in getPagesAndFlvData.pageList"
              :key="item.cid"
            >
              <el-row>
                <el-col :span="6">
                  <div class="title">{{ item.part }}</div>
                </el-col>
                <el-col :span="6"
                  >视频时长&#32;{{ getVideoTime(index) }}</el-col
                >
                <el-col :span="6"
                  >视频大小&#32;{{ getVideoSize(index) }}</el-col
                >
                <el-col :span="6">
                  <el-row>
                    <el-col :span="6">
                      <i
                        class="el-icon-download cursor"
                        style="font-size:20px"
                        @click="downLoadVideo(index)"
                      />
                    </el-col>
                    <el-col :span="6">
                      <i
                        class="el-icon-refresh cursor"
                        style="font-size:20px"
                      />
                    </el-col>
                    <el-col :span="12"
                      ><span class="cursor" @click="ReqDwonLoadList"
                        >查看下载列表</span
                      ></el-col
                    >
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: null,
      avid: 65313713,
      dialogTableVisible: false,
      cookie: ""
    };
  },
  methods: {
    ReqPagesAndFlv() {
      this.loading = this.$loading({
        lock: true,
        text: "拉取数据中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$store.state.wsConn.send(
        JSON.stringify({
          type: 0,
          data: {
            avid: this.avid.toString(),
            cookie: this.cookie
          }
        })
      );
    },
    ReqDwonLoadList() {
      this.loading = this.$loading({
        lock: true,
        text: "请求下载列表中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$store.state.wsConn.send(
        JSON.stringify({
          type: 3
        })
      );
    },
    getVideoTime(index) {
      if (this.getPagesAndFlvData.flvList[index] === null) {
        return "拉取失败";
      }
      let m = (
        (this.getPagesAndFlvData.flvList[index]
          .map(item => item.length)
          .reduce((total, num) => total + num) /
          1000) %
        60
      ).toFixed(0);
      return (
        (
          this.getPagesAndFlvData.flvList[index]
            .map(item => item.length)
            .reduce((total, num) => total + num) /
          1000 /
          60
        ).toFixed(0) +
        " 分 " +
        m +
        " 秒 "
      );
    },
    getVideoSize(index) {
      if (this.getPagesAndFlvData.flvList[index] === null) {
        return "拉取失败";
      }
      return (
        (
          this.getPagesAndFlvData.flvList[index]
            .map(item => item.size)
            .reduce((total, num) => total + num) /
          1024 /
          1024
        ).toFixed(1) + " M"
      );
    },
    downLoadVideo(index) {
      let flvData = this.getPagesAndFlvData.flvList[index];
      let pageData = this.getPagesAndFlvData.pageList[index];
      flvData.forEach(element => {
        this.$store.state.wsConn.send(
          JSON.stringify({
            type: 2,
            data: {
              url: element,
              dirName: this.getPagesAndFlvData.title,
              fileName: pageData.part,
              avid: parseInt(this.avid),
              cid: pageData.cid,
              order: flvData.order
            }
          })
        );
      });
      this.$notify({
        title: "success",
        message: "开启请求下载",
        type: "success"
      });
    },
    stopDownLoadVideo(avid, cid, fileName, order) {
      this.loading = this.$loading({
        lock: true,
        text: "请求停止下载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      this.$store.state.wsConn.send(
        JSON.stringify({
          type: 4,
          data: {
            avid,
            cid,
            fileName,
            order
          }
        })
      );
    },
    restoreLoadDownVideo(avid, cid, fileName, order, url, dirName, size) {
      this.$store.state.wsConn.send(
        JSON.stringify({
          type: 5,
          data: {
            url: url,
            dirName: dirName,
            fileName: fileName,
            size: size,
            avid: parseInt(avid),
            cid: cid,
            order: order
          }
        })
      );
    }
  },
  computed: {
    getErrorData() {
      return this.$store.state.errorData;
    },
    getPagesAndFlvData() {
      return this.$store.state.pagesAndFlvData;
    },
    getDwonLoadList() {
      return this.$store.state.dwonLoadList;
    },
    getStopDownLoadCounter() {
      return this.$store.state.stopDownLoadCounter;
    },
    getRestoreDownLoadCounter() {
      return this.$store.state.restoreDownLoadCounter;
    }
  },
  watch: {
    getErrorData: function(old, newd) {
      this.loading.close();
      if (newd != null) {
        this.$notify.error({
          title: "error",
          message: newd
        });
      }
      this.$store.commit("seterrorData", null);
    },
    getPagesAndFlvData: function() {
      this.loading.close();
    },
    getDwonLoadList: function() {
      this.loading.close();
      this.dialogTableVisible = true;
    },
    getStopDownLoadCounter: function() {
      this.loading.close();
      this.$notify({
        title: "success",
        message: "已经暂停下载",
        type: "success"
      });
    },
    getRestoreDownLoadCounter: function() {
      this.loading.close();
      this.$notify({
        title: "success",
        message: "已经恢复下载",
        type: "success"
      });
    }
  }
};
</script>

<style lang="less">
.video-container {
  margin-top: 20px;
  .big-title {
    color: aliceblue;
    background-color: #67c23a;
    height: 60px;
    font-size: 18px;
    text-align: center;
    line-height: 60px;
  }
  .video-list {
    .item {
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #e6a23c;
      color: aliceblue;
      height: 40px;
      font-size: 14px;
      text-align: center;
      line-height: 40px;
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .cursor:hover {
        cursor: pointer;
      }
    }
    .item-d {
      background-color: #f56c6c;
    }
  }
}
</style>
